<template>
    <el-dialog title="付款记录" :close-on-click-modal="false" append-to-body :visible.sync="visible" lock-scroll
        width="1000px">
        <el-form ref="elForm" :model="dataForm" label-width="120px" label-position="right">
            <template v-if="!loading">
                <el-table :data="tableData">
                    <el-table-column prop="payee" label="收款单位">
                    </el-table-column>
                    <el-table-column prop="receivingAccount" label="收款账号">
                    </el-table-column>
                    <el-table-column prop="nickName" label="付款单位">
                    </el-table-column>
                    <el-table-column prop="paymentAccount" label="付款账号">
                    </el-table-column>
                    <el-table-column prop="amountPaid" label="付款金额">
                    </el-table-column>
                    <el-table-column prop="createTime" label="付款时间">
                    </el-table-column>
                    <el-table-column prop="flag" label="付款凭证">
                        <template slot-scope="scope">
                            <el-button type="text" v-if="scope.row.flag" style="color: rgb(79, 79, 248);"
                                @click="downloadPay(scope.row)">下载凭证</el-button>
                            <div v-else>未上传</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createBy" label="操作人员">
                    </el-table-column>
                    <el-table-column prop="remark" label="付款备注">
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="updateList(scope.row)">编辑</el-button>
                            <el-button size="mini" type="text" @click="deletePayAnn(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-form>
        <span slot="footer" class="dialog-footer">

            <el-button @click="visible = false" type="primary">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { getPaymentRecords, getAnnexListById, deletePayment } from "@/api/contract/contractOrg";

export default {
    props: [],
    data() {
        return {
            visible: false,
            detailVisible: false,
            loading: false,
            dataForm: {},
            num: '',
            tableData: [],
            listHeader: {},
            // baseUrl: 'http://192.168.3.218:8082'
        };
    },
    created() { },
    methods: {
        init(id, list) {
            this.dataForm.id = id || 0;
            this.list = list;
            this.visible = true;
            this.$nextTick(() => {
                if (this.dataForm.id) {
                    this.loading = true;
                    getPaymentRecords(id).then((res) => {
                        this.tableData = res.rows;
                        this.loading = false;
                    });
                }
            });
        },
        // 编辑记录
        updateList(row) {
            this.$emit('refreshPaymentTwo', row, this.list)
        },
        // 下载凭证
        downloadPay(row) {
            getAnnexListById(row.id).then(res => {
                for (let i = 0; i < res.data.length; i++) {
                    this.$download.resource(res.data[i].filePath);
                }
            })
        },
        // 删除
        deletePayAnn(id) {
            deletePayment(id).then(list => {
                this.$modal.msgSuccess(list.msg);
                getPaymentRecords(this.dataForm.id).then((res) => {
                    this.tableData = res.rows;
                    this.$emit('getList')
                });
            })
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .percent-input::after {
    content: '%';
    position: absolute;
    right: 50px;
    /* 调整百分号的位置 */
    top: 50%;
    /* 可根据需要调整垂直位置 */
    transform: translateY(-50%);
}

::v-deep .percent-input1::after {
    content: '元';
    position: absolute;
    right: 50px;
    /* 调整百分号的位置 */
    top: 50%;
    /* 可根据需要调整垂直位置 */
    transform: translateY(-50%);
}
</style>